<template>
	<view  style="width: 100%;background-color:#efeff4">
		<!-- 头部logo -->
		<!-- <view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="width: 55px;height: 65px;" :src="imgInfo.head" class="head_logo" />
				</view>
			</view>
		</view> -->
		<view>
			<uni-nav-bar title="登录" background-color="#1E90FF" fixed="true" shadow="flase"></uni-nav-bar>
		</view>
		<view style="margin-top: 35%;" class="content">
			<view class="login_form">
				<view class="input">
					<view class="img">
						<image style="width:27px;height: 27px;" :src="imgInfo.icon_user" />
					</view>
					<input type="text" v-model="username" placeholder="请输入用户账号">
					<view class="img">
						<image @tap="delUser" class="img_del" :src="imgInfo.icon_del" />
					</view>
				</view>
				<view class="line" />
				<view class="input">
					<view class="img">
						<image style="width:20px;height: 25px;" :src="imgInfo.icon_pwd" />
					</view>
					<input :type="pwdType" :value="userpwd" @input="inputPwd" placeholder="请输入密码">
					<view class="img" @tap="switchPwd">
						<image class="img_pwd_switch" :src="imgInfo.icon_pwd_switch" />
					</view>
				</view>
				<view class="line" />
				<view class="input">
					<view class="img">
						<image style="width:25px;height: 25px;" :src="imgInfo.icon_code" />
					</view>
					<!-- <input :type="text" :value="code" @input="inputCode" placeholder="请输入验证码"> -->
					<input type="text" v-model="code" placeholder="请输入验证码">
					<view class="img" @click="getUserCode">
						<image style="width:100px;height: 27px;" class="img_pwd_switch" :src="img" />
					</view>
				</view>
			</view>
			<!-- 登录提交 -->
			<button class="submit" type="primary" @tap="tologin">登录</button>
			<view class="opts" style="margin-top: 20px;">
				<text @tap="goReg" class="text">立即注册</text>
				<text class="text" @tap="retrieve">忘记密码？</text>
			</view>
			<view class="quick_login_line">
				<view class="line" />
				<text class="text" @tap="toFaceLogin" style="color: #007AFF;">人脸识别登录</text>
				<view class="line" />
			</view>
		</view>
	</view>
</template>
<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import loginjs from '../../login.js'
	/* import JSEncrypt from '../../static/rsa/jsencrypt.js' */
	import JSEncrypt from 'jsencrypt';
	export default {
		computed: mapState(['hasLogin', 'baseUrl']),
		components: {
			uniNavBar,
			uniGrid
		},
		data() {
			const isUni = typeof(uni) !== 'undefined'
			return {
				arr:[false,false,false,false,false,false],
				Authorization: null,
				username: '',
				publicKey: "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCDVXeaJKxxlRZVasJaK0JFruP5jhoAmmd9oK6QVUpuNLgegkpAyx2ZwlHxI+3t3WN0PlHJ2YMG1eI3oGE/26eok3KLt0jvQfnqJZoc/VTUm1Mr6zmOIip2p1/alsA/eVyywFgtABPbTfbcyBFNT+PKDJJJ1Ttli6DiMNTPgHD+IQIDAQAB\n" +
					"DT1tmKXBOXDzdc6W9Uhxt8uZJdvTP8jsD/VJ3cnZWiITNAf5D/NG7tdmqzHZxyhjn3AY6wiXIA11IIj3C0uaUtFFGfw7oZQzDEvMpi+B4/RjOj9DlYKCtgzbjMjCIKzB/xxu571/dpGfvDztRuwTqYJ71/s61sUUseHIRvsqu7Q=",

				userpwd: '',
				code:'',
				uuid:'',
				//验证码图片
				img:'',
				pwdType: 'password',
				imgInfo: {
					head: isUni ? '../../static/head.png' : require('../../static/head.png'),
					icon_user: isUni ? '../../static/icon_user.png' : require('../../static/icon_user.png'),
					icon_del: isUni ? '../../static/icon_del.png' : require('../../static/icon_del.png'),
					icon_pwd: isUni ? '../../static/icon_pwd.png' : require('../../static/icon_pwd.png'),
					icon_code: isUni ? '../../static/icon_code.png' : require('../../static/icon_code.png'),
					icon_pwd_switch: isUni ? '../../static/icon_pwd_switch.png' : require('../../static/icon_pwd_switch.png'),
					qq: isUni ? '../../static/qq.png' : require('../../static/qq.png'),
					wechat: isUni ? '../../static/wechat.png' : require('../../static/wechat.png'),
					weibo: isUni ? '../../static/weibo.png' : require('../../static/weibo.png')
				}
			}
		},
		created() {
			this.getUserCode()
		},
		onShow() {
			this.getUserCode()
		},
		methods: {
			...mapMutations(['login']),
			radioChange(e){
				console.log(e.detail.value)
			},
			clickImage(index){
				console.log(index)
				this.arr[index]=true
				
				/* if(!this.arr[index]){
					console.log(this.arr[index])
					this.arr[index]=!this.arr[index]
					console.log(this.arr[index])
				}else{
					
					this.arr[index]=true	
					console.log(this.arr[index])
				}
				 */
				/* if(this.arr[index]){
					this.arr[index]=false	
				}else if(){
					this.arr[index]=true	
				} */
				
				console.log(this.arr[index])
				
				
			},
			inputUsername(e) {
				this.username = e.target.value
			},
			inputPwd(e) {
				this.userpwd = e.target.value
			},
			inputCode(e) {
				// this.code = e.target.value
			},
			delUser() {
				this.username = ''
			},
			switchPwd() {
				this.pwdType = this.pwdType === 'text' ? 'password' : 'text'
			},

			RSAEncrypt(word, publicKey) {
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var data = encrypt.encrypt(word);
				return data;
			},

			tologin() {
				//非空判断
				if (this.username == '' || this.userpwd == '') {
					uni.showToast({
						title: '请填写完整信息',
						duration: 1000,
						icon: "none"
					});
					this.username = '',
						this.userpwd = ''
					return
				}
				//从本地存储中拿取注册的用户信息并且比较
				var passwordandRSA = this.RSAEncrypt(this.userpwd, this.publicKey)

				var data = {
					loginName: this.username,
					password: passwordandRSA,
					userType:4,
					code:this.code,
					uuid:this.uuid
				};
				/* 过期时间 */
				var expiresDate = new Date();
				expiresDate.setTime(expiresDate.getTime() + (24 * 15 * 10 * 60 * 1000));
				uni.showLoading({
					title: "正在登录...",
					duration:2000
				})
				uni.request({
					url: this.baseUrl + 'api/auth/login', //仅为示例，并非真实接口地址。
					data: JSON.stringify(data),
					method: "POST",
					success: (result) => {
						console.log(result)
						if (result.data.code == 200) {
							uni.hideLoading()
							/* 登录成功*/
							uni.setStorageSync('jaAuthorization', result.data.data.token);
							uni.setStorageSync('japassword', this.userpwd, {
								expires: expiresDate
							});
							uni.setStorageSync('jaloginName', result.data.data.userName, {
								expires: expiresDate
							});
							uni.setStorageSync('jafullName', result.data.data.fullName);
							uni.setStorageSync('jaUserId', result.data.data.userId);
							uni.setStorageSync('jaUserType', result.data.data.userType);
							uni.setStorageSync('nation', result.data.data.nation);
							uni.setStorageSync('province', result.data.data.province);
							uni.setStorageSync('city', result.data.data.city);
							uni.setStorageSync('county', result.data.data.county);
							uni.setStorageSync("level", result.data.data.level);
							uni.setStorageSync("zonePer", result.data.data.zonePer);
							//登录成功跳转至首页
							uni.switchTab({
								url: '../index/index'
							});

						}
						if (result.data.code == 500) {
							uni.hideLoading()
							uni.showToast({
								title: result.data.desc,
								duration: 1000,
								icon: "none"
							});
							this.getUserCode()
						}
					},
					fail(e) {
						//登录失败
						uni.hideLoading()
						uni.showToast({
							title: '登录失败',
							duration: 1000,
							icon: "none"
						});
						this.getUserCode()
					}
				});
			},
			getUserCode() {
				uni.request({
					url: this.baseUrl + "/api/auth/getCode",
					method: "GET",
					header: {
						"Authorization": this.Authorization,
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 200) {
							var data = res.data.data
							this.img = 'data:image/png;base64,' + data.image
							this.uuid = data.uuid
						} else {
							uni.showToast({
								title: res.desc,
								icon: "none",
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "获取用户信息失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			goReg() {
				uni.navigateTo({
					url: '/pages/reg/reg'
				})
			},
			retrieve() {
				uni.navigateTo({
					url: '/pages/find-pwd/find-pwd'
				})
			},
			toFaceLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},

			thirdLogin(type) {
				console.log(type)
			}
		}
	}
</script>
<style>
	page {
		height: auto;
		min-height: 100%;
		background-color: #f5f6f8;
	}
</style>
<style lang="scss" scoped>
	$logo-padding: 60px;
	$form-border-color: rgba(214, 214, 214, 1);
	$text-color: #B6B6B6;

	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: $logo-padding;
		padding-bottom: $logo-padding;

		.head_bg {
			border: 1px solid #fbecf1;
			border-radius: 50px;
			width: 100px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			.head_inner_bg {
				border-radius: 40px;
				width: 80px;
				height: 80px;
				display: flex;
				background-color: #fc2c5d;
				align-items: flex-end;
				justify-content: center;
				overflow: hidden;
			}
		}
	}

	.login_form {
		display: flex;
		margin: 20px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid $form-border-color;
		border-radius: 10px;

		.line {
			width: 100%;
			height: 1px;
			background-color: $form-border-color;
		}

		.input {
			width: 100%;
			max-height: 45px;
			display: flex;
			padding: 3px;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.img {
				min-width: 40px;
				min-height: 40px;
				margin: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.img_del {
				width: 21px;
				height: 21px;
			}

			.img_pwd_switch {
				width: 28px;
				height: 12px;
			}

			input {
				outline: none;
				height: 30px;
				width: 100%;

				&:focus {
					outline: none;
				}
			}
		}
	}

	.submit {
		margin-top: 30px;
		margin-left: 20px;
		margin-right: 20px;
		color: white;
		background-color: #2F85FC;
		-webkit-tap-highlight-color: #2F85FC;

		&:active {
			color: #B6B6B6;
			background-color: #2F85FC;
		}
	}

	.opts {
		margin-top: 5px;
		margin-left: 25px;
		margin-right: 25px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.text {
			font-size: 13px;
			color: $text-color;
		}
	}

	.quick_login_line {
		margin-top: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.line {
			height: 1px;
			width: 38%;
			background-color: rgba(211, 211, 213, 1);
		}

		.text {
			font-size: 13px;
			color: rgba(200, 200, 200, 1);
			margin: 2px;
		}
	}

	.quick_login_list {
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.item {
			width: 50px;
			height: 50px;
			margin: 20px;
		}
	}
</style>
